<template>
  <div class="page-container">
    <div class="hero-section text-center">
      <h1 class="hero-title">CloudBase Vue</h1>
      <p class="hero-subtitle">
        基于 Vue 3 和腾讯云开发的现代化 Web 应用模板
      </p>
      
      <!-- 云开发状态显示 -->
      <div class="card mb-10">
        <div class="card-header">
          <h2 class="card-title">云开发状态</h2>
        </div>
        
        <div class="card-body">
          <div class="status-indicator">
            <div 
              class="status-dot"
              :class="cloudbaseStatus.connected ? 'status-connected' : 'status-disconnected'"
            ></div>
            <span class="status-text">
              {{ cloudbaseStatus.connected ? '已连接' : '未连接' }}
            </span>
          </div>
          
          <div class="env-info">
            <p v-if="cloudbaseStatus.envId">环境ID: {{ cloudbaseStatus.envId }}</p>
            <p v-else class="warning-text">请配置环境ID</p>
          </div>
          
          <div v-if="loginState.isLoggedIn" class="login-status">
            <p class="success-text">
              ✅ 用户已登录 ({{ loginState.user?.isAnonymous ? '匿名' : '已认证' }})
            </p>
          </div>
        </div>
      </div>
      
      <!-- 功能按钮 -->
      <div class="action-buttons">
        <button 
          class="btn-primary"
          @click="testCloudbaseConnection"
          :disabled="isLoading"
        >
          <span v-if="isLoading" class="loading-spinner"></span>
          测试云开发连接
        </button>
        
        <button 
          class="btn-outline ml-10"
          @click="$router.push('/about')"
        >
          了解更多
        </button>
      </div>
      
      <!-- 快速开始指南 -->
      <div class="card mt-10">
        <div class="card-header">
          <h3 class="card-title">🚀 快速开始</h3>
        </div>
        
        <div class="card-body">
          <div class="guide-steps">
            <div class="guide-step">
              <span class="step-number">1</span>
              <div class="step-content">
                <p class="step-title">配置云开发环境</p>
                <p class="step-desc">编辑 <code>src/utils/cloudbase.js</code> 文件，设置您的环境ID</p>
              </div>
            </div>
            
            <div class="guide-step">
              <span class="step-number">2</span>
              <div class="step-content">
                <p class="step-title">开始开发</p>
                <p class="step-desc">使用云数据库、云函数、云存储等功能</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer/>
    </div>
  </div>
</template>

<script setup>
import Footer from '../components/Footer.vue'
import { ref, onMounted } from 'vue'
import { ensureLogin, checkEnvironment, isValidEnvId } from '../utils/cloudbase.js'

// 响应式数据
const isLoading = ref(false)
const cloudbaseStatus = ref({
  connected: false,
  envId: isValidEnvId ? 'yuegu-monopy-777-5fmwgrd03af5f19' : null
})
const loginState = ref({
  isLoggedIn: false,
  user: null
})

// 测试云开发连接
const testCloudbaseConnection = async () => {
  isLoading.value = true
  try {
    const state = await ensureLogin()
    loginState.value = state
    cloudbaseStatus.value.connected = true
    
    // 显示成功消息
    console.log('云开发连接测试成功！')
  } catch (error) {
    console.error('云开发连接测试失败:', error)
    cloudbaseStatus.value.connected = false
  } finally {
    isLoading.value = false
  }
}

// 组件挂载时检查云开发状态
onMounted(async () => {
  // 检查环境配置
  const envValid = checkEnvironment()
  cloudbaseStatus.value.connected = envValid
  
  if (envValid) {
    // 尝试获取登录状态
    try {
      const state = await ensureLogin()
      loginState.value = state
    } catch (error) {
      console.warn('初始化登录状态失败:', error)
    }
  }
})
</script>

<style scoped>
/* 页面特定样式 */
.hero-section {
  padding: 40px 0;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-connected {
  background-color: #4CAF50;
}

.status-disconnected {
  background-color: #F44336;
}

.status-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.env-info {
  margin: 10px 0;
  font-size: 0.9rem;
  color: #666;
}

.warning-text {
  color: #FF9800;
}

.success-text {
  color: #4CAF50;
}

.login-status {
  margin-top: 15px;
  padding: 10px;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 6px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
  margin-top: 10px;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #2196F3;
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 0.9rem;
  color: #666;
}

code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}
</style>
